<template>
    <div class="layout">
        <div class="box">
            <!--<p class="p">申请提交</p>-->
            <div class="head-line">申请提交</div>
            <div class="department">
                <span class="mr10">申请部门</span>
                <el-select v-model="deptType" placeholder="相应部门名称" class="select ml10" size="small">
                    <el-option
                        v-for="item in deptList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                    </el-option>
                </el-select>
            </div>
            <ul class="ul-box" v-if="!offLine">
                <li v-for="(item,index) in listApp" :key="item.id" v-if="index <5 || (index >=5&&show1)">
                    <el-checkbox v-model="item.checked" class="checkbox"></el-checkbox>
                    <span><b>{{item.sysName}}</b></span>
                    <div class="ip-a">
                        <span>已选{{item.choiceIpList.length}}个ip地址</span>
                        <span>
                            <el-link type="primary" @click="openIp(item)" class="button">查看
                        </el-link>
                        </span>

                    </div>
                    <div class="ip-b">
                        <p v-for="(items,index) in item.choiceIpList" :key="items.id"
                           v-if="(item.choiceIpList.length > 3 && index < 2) || item.choiceIpList.length < 4">
                            IP地址：{{items.ip}}</p>
                        <p v-if="item.choiceIpList.length > 3">...</p>
                    </div>
                </li>
                <li class="li-box" @click="visible1=true">
                    <i class="iconfont icon-plus"></i>
                    <p>
                        新增一个自建系统
                    </p>
                </li>
            </ul>
            <div class="text-center" v-if="listApp[0]&&listApp.length>5&&!offLine">
                <el-link type="primary" :underline="false" v-if="!show1" @click="showChange">点击显示全部</el-link>
                <el-link type="primary" :underline="false" v-else @click="showChange">点击收起全部</el-link>
            </div>

            <dialog-msk :show.sync="visible1" :width="'1000px'" :title="'新增自建系统'" @cancel="close" @save="save">
                <self-add :inside="true" ref="selfAdd"></self-add>
            </dialog-msk>
            <look :show.sync="visible" @save="ipSave" :ipLists.sync="appIpList" :currentIp="currentIp"></look>
            <div class="message resourceInfoBox">
                <p>资源信息</p>
                <div class="resourceInfo">
                    <div class="p">
                        <p>
                            房屋建筑工程和市政基础设施工程竣工验收备案表
                        </p>
                        <span>资料来源：市建委</span>
                    </div>
                </div>
                <div class="checkMsg">
                    <el-checkbox-group v-model="checkList" @change="checkBox">
                        <el-checkbox label="编号"></el-checkbox>
                        <el-checkbox label="建设单位"></el-checkbox>
                        <el-checkbox label="工程名称"></el-checkbox>
                        <el-checkbox label="建筑面积"></el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="checkMsg">
                    <el-checkbox-group v-model="checkList" @change="checkBox">
                        <el-checkbox label="开工日期"></el-checkbox>
                        <el-checkbox label="竣工验收日期"></el-checkbox>
                        <el-checkbox label="备案日期"></el-checkbox>
                        <el-checkbox label="更新时间"></el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="message">
                <p>信息确认</p>
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns">
                    <!--接受scope-->
                    <template slot="name" slot-scope="scope">
                        <el-image :src="scope.row.icon" class="logo"></el-image>
                        <span>{{scope.row.name}}</span>
                        <!--<span>{{scope.row.date}}</span>-->
                    </template>
                </table-example>

                <el-form class="form-common mt20" :model="ruleForm" :rules="rules" ref="ruleForm"
                         size="small" :label-position="'top'">
                    <el-form-item label="联系人：" prop="contact">
                        <el-input v-model="ruleForm.contact" class="input" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="phone">
                        <el-input v-model="ruleForm.phone" class="input" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="申请说明：" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 4}"
                                  size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="相关文件提交：">
                        <upload :fileList.sync="fileList" :multiple="true"></upload>
                    </el-form-item>
                </el-form>
                <div class="text-center mt30">
                    <el-button type="primary vast" @click="submit" size="small">提交申请</el-button>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    import tableExample from '@/components/table'
    import upload from '@/components/upload'
    import look from '@/components/look'
    import dialogMsk from '@/components/dialog'
    import page from '@/components/pagination'
    import selfAdd from '@/page/manager/self-built-add'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                tableData: [],
                tableData1: [],
                header: [

                    {
                        prop: 'resName',
                        label: '名称',
                        minWidth: '60%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '提供单位',
                        minWidth: '40%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                deptList: [
                    {
                        value: 1,
                        label: '用户主要所属部门'
                    }
                ],
                slotColumns: ['name'],
                slotColumns1: ['ip', 'service', 'operate'],
                deptType: '',
                fileList: [],
                file: [],
                contact: '', // 联系人
                phone: '',
                remark: '',
                checked: false,
                visible: false,
                visible1: false,
                name: '',
                show: false,
                data: {},
                listApp: [],
                appList: [],
                itemList: [],
                show1: false,
                flag: false,
                appIpList: [],
                currentIp: null,
                loading: false,
                idList: null,
                formCart: false,
                offLine: false,
                ruleForm: {
                    contact: '',
                    phone: '',
                    remark: ''
                },
                rules: {
                    contact: [
                        {required: true, message: '请输入联系人', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入申请说明', trigger: 'blur'}
                    ]
                },
                applyDeptName: '',
                checkedCode: false,
                checkedUnit: false,
                checkedName: false,
                checkedArea: false,
                checkedStaTime: false,
                checkedEndTime: false,
                checkedRecord: false,
                checkedUpdataTime: false,
                checkList: []
            }
        },
        mounted() {
            if (this.user) {
                this.deptList[0].label = this.user.ownDeptName
                this.deptType = this.user.ownDeptName
            }
            if (this.$route.query.idList) this.idList = String(this.$route.query.idList)
            if (this.$route.query.applyDeptName) this.applyDeptName = String(this.$route.query.applyDeptName)
            if (this.$route.query.formCart) this.formCart = this.$route.query.formCart
            if (this.$route.query.offLine) this.offLine = JSON.parse(this.$route.query.offLine)
            this.getData()
            this.getList()
            this.getRecord()
        },
        watch: {
            user(val) {
                if (val && val.ownDeptName) {
                    this.deptList[0].label = val.ownDeptName
                    this.deptType = val.ownDeptName
                }
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        methods: {
            checkBox() {
            },
            managerApps(service) {
                this.show = true
            },
            change() {
                if (this.checked) {
                    this.$refs.table.handleSelectionAll()
                } else {
                    this.$refs.table.handleSelectionClear()
                }
            },
            //  自建系统列表
            getList() {
                this.loading = true
                this.$http.get('/deptAdmin/getAppList').then(result => {
                    this.loading = false
                    if (result.success) {
                        for (let j = 0; j < result.data.length; j++) {
                            result.data[j].choiceIpList = result.data[j].ipList
                            result.data[j].choiceIpList.forEach(item => {
                                item.checked = true
                            })
                        }
                        this.listApp = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            //  待确认订单明细
            getData() {
                let url = ''
                this.loading = true
                if (this.offLine) {
                    url = '/rdResForOnline/selectApplyOnlineOne'
                } else {
                    if (this.formCart) {
                        url = '/rdResourceApplicationDetail/selectApplyResBatch'
                    } else {
                        url = '/rdResourceApplicationDetail/selectApplyResOne'
                    }
                }
                this.$http.get(url, {
                    idList: this.idList,
                    id: this.idList
                }).then(result => {
                    this.loading = true
                    if (result.success) {
                        this.deptType = result.data.applyDeptName || result.data[0].applyDeptName
                        this.deptList[0].label = result.data.applyDeptName || result.data[0].applyDeptName
                        if (this.offLine) {
                            this.tableData.push(result.data)
                            this.itemList.push({id: result.data.id})
                        } else {
                            this.tableData = result.data
                            for (let i = 0; i < result.data.length; i++) {
                                this.itemList.push({id: result.data[i].id})
                            }
                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getRecord() {
                this.$http.get('/rdDbDict/getApplyInfos', {
                    resId: this.idList
                }).then(result => {
                    if (result.success) {
                        console.log(result.data)
                    }
                })
            },
            submit() {
                let ipIdList = [], url = '', obj = {}
                this.appList = []
                this.file = []
                for (let i = 0; i < this.fileList.length; i++) {
                    this.file.push(this.fileList[i].id)
                }
                for (let j = 0; j < this.listApp.length; j++) {
                    if (this.listApp[j].checked) {
                        this.appList.push({
                            sysName: this.listApp[j].sysName,
                            sysCode: this.listApp[j].sysCode,
                            ip: this.listApp[j].choiceIpList.map(item => item.ip).join(',')
                        })
                        this.listApp[j].choiceIpList.map(item => {
                            ipIdList.push(item.id)
                        })
                    }
                }
                if (!this.itemList[0]) {
                    this.$method.messageBox('alert', '资源异常，无法提交')
                    return false
                }
                if (!this.appList[0] && !this.offLine) {
                    this.$method.messageBox('alert', '请选择自建系统')
                    return false
                }
                obj = {
                    contactName: this.ruleForm.contact,
                    contactTel: this.ruleForm.phone,
                    remark: this.ruleForm.remark,
                    applyDeptId: this.deptType,
                    enclosure: this.file.join(','),
                    idList: this.idList.split(','),
                    orderApps: this.appList
                    // resId: this.idList,
                    // selfSysId: this.appList,
                    // ipIdList: ipIdList.join(',')
                }
                if (!this.offLine) {
                    if (this.formCart) {
                        url = '/rdResourceApplicationDetail/updateApplyBatch'
                    } else {
                        url = '/rdResourceApplicationDetail/saveApply'
                    }
                } else {
                    url = '/rdResForOnline/oneApplyForOnline'
                }
                this.validate('ruleForm', () => {
                    this.$http.post(url, obj).then(result => {
                        if (result.success) {
                            this.$router.replace({
                                path: '/res/success',
                                query: {
                                    // orderNo: result.data,
                                    offLine: this.offLine
                                }
                            })
                        }
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            openIp(item) {
                this.visible = true
                this.currentIp = item
                let list1 = item.ipList, list2 = item.choiceIpList
                list1.forEach(item => {
                    let obj = list2.find((list) => {
                        return list.id === item.id
                    })
                    item.checked = obj && obj.ip
                })
                this.appIpList = list1
            },
            ipSave(val) {
                if (val[0]) {
                    this.currentIp.choiceIpList = val
                    this.visible = false
                } else {
                    this.$message.closeAll()
                    this.$message.warning({
                        message: '请至少选择一个ip',
                        showClose: true
                    })
                }
            },
            close() {
                this.$refs.selfAdd.ruleForm = {
                    name: '',
                    remark: ''
                }
                this.$refs.selfAdd.ipList = []
                this.$refs.selfAdd.loading = false
                this.visible1 = false
            },
            save() {
                let _this = this
                this.$refs.selfAdd.add(() => {
                    this.getList()
                    _this.close()
                })
            },
            showChange() {
                this.show1 = !this.show1
            }
        },
        components: {
            tableExample,
            upload,
            look,
            dialogMsk,
            page,
            selfAdd
        }
    }
</script>
<style scoped lang="less">
    .box {
        .department {
            padding: 20px 30px;
            padding-top: 28px;
            /*margin: 30px 0;*/
            margin-top: 10px;
            background-color: #fff;

            .select {
                width: 460px;
                height: 45px;
            }
        }

        ul {
            width: 100%;
            /*height: 5.7rem;*/
            overflow: hidden;
            margin-top: 20px;

            li {
                float: left;
                min-width: 300px;
                width: 380px;
                max-width: 380px;
                height: 220px;
                margin-right: 30px;
                margin-bottom: 20px;
                padding: 22px 30px;
                padding-bottom: 0;
                background-color: #fff;

                .checkbox {
                    width: 16px;
                    height: 16px;
                }

                span {
                    font-size: 20px;
                    color: #333;
                    padding-left: 5px;
                }

                .ip-a {
                    margin-top: 10px;
                    border-bottom: 1px solid #EFEFEF;
                    padding-bottom: 10px;

                    .button {
                        border: none;
                        background-color: #fff;
                        color: #4995F4;
                        margin-left: 30px;
                    }

                    span {
                        font-size: 16px;
                    }
                }

                .ip-b {
                    padding-top: 15px;

                    p {
                        font-size: 14px;
                        color: #999;
                        padding: 4px;
                    }

                }

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }

            .li-box {
                text-align: center;
                color: #dcdcdc;
                font-size: 16px;
                padding-top: 57px;

                i {
                    font-size: 65px;
                }
            }

            .built-info {
                .line {
                    margin-bottom: 20px;

                    > * {
                        display: inline-block;
                        max-width: 900px;
                    }

                    label {
                        float: left;
                        width: 150px;
                        text-align: right;
                        margin-right: 15px;
                        line-height: 40px;
                        font-size: 16px;
                    }

                    .el-link {
                        line-height: 40px;
                    }
                }
            }

            .built-address {
                margin-top: 30px;
            }
        }

        .resourceInfoBox {
            .resourceInfo {
                background-color: #eee;
                padding: 20px;
                padding-top: 0;

                .p {
                    color: #444;
                    border-bottom: 1px solid #ccc;

                    p {
                        font-size: 18px;
                    }

                    span {
                        line-height: 30px;
                    }
                }
            }

            .checkMsg {
                background-color: #eee;
                padding: 20px;
                padding-top: 0;

                .el-checkbox {
                    width: 100px;
                }
            }
        }

        .message {
            margin-top: 10px;
            /*height: 14.16rem;*/
            background-color: #fff;
            padding: 50px 40px;
            padding-top: 0;

            p {
                padding: 30px 0 10px;
                color: #999;
            }

            .input {
                width: 460px;
            }

            .logo {
                margin-left: 150px;
                margin-right: -100px;
                width: 50px;
                height: 22px;
                float: left;
                /*background-color: pink;*/
            }
        }

        .btn {
            width: 200px;
            height: 50px;
            margin-top: 100px;
            margin-left: 470px;
        }

    }

</style>
